<template>
  <article class="page page-qrcode">
    <h4 class="text-center">条形码/二维码生成&识别</h4>
    <div class="tabs-bar">
      <div v-for="(v, i) in tabsList" :key="i" :class="['tab-item', { active: i === tabActiveIndex }]"
        @click="tabItemClick(i)">{{ v.label }}</div>
    </div>
    <form class="form">
      <fieldset>
        <legend>设置&操作</legend>
        <div class="alert alert-info" role="alert">
          <div class="form-check form-check-inline" v-for="(v, i) in radiosList" :key="i">
            <input class="form-check-input" type="radio" :value="v.value" v-model="radioActive">
            <label class="form-check-label">{{ v.label }}</label>
          </div>
        </div>
        <component :is="tabActive.component" :codeType="radioActive"></component>
      </fieldset>
    </form>
  </article>
</template>

<script>
import cmpEncodeSingle from './encode-single.vue'
import cmpEncodeBatch from './encode-batch.vue'
import cmpDecodeSingle from './decode-single.vue'
import cmpDecodeBatch from './decode-batch.vue'
export default {
  name: 'qrcode',
  components: {
    cmpEncodeSingle,
    cmpEncodeBatch,
    cmpDecodeSingle,
    cmpDecodeBatch,
  },
  data() {
    return {
      text: '',
      variable: '',
      tabActiveIndex: 0,
      tabsList: [
        { label: '单个生成', value: 'encodeSingle', component: 'cmpEncodeSingle' },
        { label: '批量生成', value: 'encodeBatch', component: 'cmpEncodeBatch' },
        { label: '单个识别', value: 'decodeSingle', component: 'cmpDecodeSingle' },
        { label: '批量识别', value: 'decodeBatch', component: 'cmpDecodeBatch' },
      ],
      radioActive: 'qrcode',
      radiosList: [
        { label: '条形码（不支持中文）', value: 'barcode' },
        { label: '二维码', value: 'qrcode' },
      ]
    }
  },
  computed: {
    tabActive() {
      return this.tabsList[this.tabActiveIndex] || {}
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    tabItemClick(index) {
      this.tabActiveIndex = index
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.page-qrcode {
  display: flex;
  flex-direction: column;

  .tabs-bar {
    margin-bottom: 1em;
  }

  .form {
    height: 0;
    flex-grow: 1;

    fieldset {
      height: 100%;
    }

    .alert-info {
      margin-bottom: 1em;
    }
  }
}</style>
